<template>
  <base-breadcrumb>
    <a-row
      :gutter="10"
      class="page-height"
    >
      <!-- 树搜索 -->
      <a-col
        :span="6"
        class="permission-collapsed"
        :class="{ 'permission-tree-collapsed': collapsed }"
      >
        <a-card
          :style="{ border: collapsed ? 'none' : 'border: 1px solid #e8e8e8' }"
          class="page-height-tree"
        >
          <title-name title="组织架构" />
          <PermissionTreeOrganization
            :collapsed.sync="collapsed"
            @select="handleSelect"
          />
        </a-card>
      </a-col>
      <a-col
        :span="18"
        class="permission-collapsed page-height-list-wrapper"
        :style="collapsed ? 'width:calc(100% - 10px)' : ''"
      >
        <searchData
          :search-data="searchArr"
          @search="search"
        />

        <a-card
          :bordered="false"
          class="page-height-list"
        >
          <!-- <title-name title="项目经理积分列表"></title-name> -->

          <div class="pub-table-select-count">
            <a-icon
              type="info-circle"
              theme="twoTone"
            />
            <span style="margin-right: 12px">
              项目经理总数：<span class="totalNum">{{ totalDels.totalProjectManagers }} 个</span> | 正常：<span class="totalNum">{{ totalDels.normalNumber }} 个</span>
              | 灰色提示：<span class="totalNum">{{ totalDels.greyNumber }} 个</span>| 黄色提示：<span class="totalNum">{{ totalDels.yellowNumber }} 个</span>| 红色提示：<span
                class="totalNum">{{ totalDels.redNumber }} 个</span>
            </span>
          </div>
          <list-table
            ref="table"
            size="default"
            :rowKey="(record) => record.id"
            :columns="columns"
            :request="loadData"
            :alert="true"
            show-size-changer
            show-quick-jumper
            showPagination="auto"
          >
            <span
              slot="serial"
              slot-scope="text, record, index"
            >{{ index + 1 }}</span>
            <span
              slot="currentResidualFraction"
              slot-scope="text, record, index"
            >{{
          Number(record.currentResidualFraction).toFixed(2)
        }}</span>
            <span
              slot="pointsDeductedThisYear"
              slot-scope="text, record, index"
            >{{
          Number(record.pointsDeductedThisYear).toFixed(2)
        }}</span>
            <span
              slot="promptSituationCode"
              slot-scope="text, record, index"
            >
              <!--{{record.promptSituationCode}}-->
              <div
                v-if="record.promptSituationCode == '1'"
                class="promptSituationCode gray"
              ></div>
              <div
                v-if="record.promptSituationCode == '2'"
                class="promptSituationCode yellow"
              ></div>
              <div
                v-if="record.promptSituationCode == '3'"
                class="promptSituationCode red"
              ></div>
            </span>

            <span
              slot="action"
              slot-scope="text, record"
            >
              <template>
                <a
                  @click="handleDels(record)"
                  v-btnPermission="[{code:'seex_pm_030_loo_01',ident:'prma_seex'},{code:'buco_pm_030_loo_01',ident:'prma_buco'}]"
                >查看</a>
                <span v-if="record.statusCode == 0">
                  <a-divider
                    type="vertical"
                    v-btnPermission="[{code:'seex_pm_030_rep_02',ident:'prma_seex'},{code:'buco_pm_030_rep_02',ident:'prma_buco'}]"
                  /><a
                    @click="handleEdit(record)"
                    v-btnPermission="[{code:'seex_pm_030_rep_02',ident:'prma_seex'},{code:'buco_pm_030_rep_02',ident:'prma_buco'}]"
                  >恢复分数</a>
                </span>
                <span v-if="record.statusCode == 1">
                  <a-divider
                    type="vertical"
                    v-btnPermission="[{code:'seex_pm_030_loo_01',ident:'prma_seex'},{code:'buco_pm_030_loo_01',ident:'prma_buco'}]"
                  /><a
                    @click="handleApproveDetail(record)"
                    v-btnPermission="[{code:'seex_pm_030_loo_01',ident:'prma_seex'},{code:'buco_pm_030_loo_01',ident:'prma_buco'}]"
                  >审批信息</a>
                </span>
              </template>
            </span>
          </list-table>

          <ApprovalDetails
            :title="'审批详情'"
            :businessId="businessId"
            :visible="visibleApprove"
            @cancel="visibleApprove = false"
            @confirm="visibleApprove = false"
          />

          <a-modal
            width="900px"
            v-model="visible"
            :title="title"
          >
            <template slot="footer">
              <a-button
                key="back"
                @click="handleCancel"
              > 取消 </a-button>
              <a-button
                key="submit"
                :loading="loading"
                type="primary"
                @click="handleOk"
              > 提交恢复 </a-button>
            </template>
            <a-form-model
              :model="form"
              ref="form1"
              :rules="rules"
            >
              <a-row>
                <a-col
                  :md="12"
                  :sm="12"
                >
                  <a-form-model-item
                    label="积分年份"
                    :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
                    :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }"
                  >
                    <BaseInput
                      v-model="form.yearOfIntegral"
                      disabled
                    ></BaseInput>
                  </a-form-model-item>
                </a-col>
                <a-col
                  :md="12"
                  :sm="12"
                >
                  <a-form-model-item
                    label="本年剩余分数"
                    :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
                    :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }"
                  >
                    <a-input-number
                      disabled
                      :min="0"
                      :max="9999999999999"
                      :step="1"
                      v-model="form.currentResidualFraction"
                      :precision="2"
                    />
                    <!-- <BaseInput v-model="form.currentResidualFraction" disabled></BaseInput> -->
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col
                  :md="12"
                  :sm="12"
                >
                  <a-form-model-item
                    label="本年扣分分数"
                    :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
                    :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }"
                  >
                    <a-input-number
                      disabled
                      :min="0"
                      :max="9999999999999"
                      :step="1"
                      v-model="form.pointsDeductedThisYear"
                      :precision="2"
                    />
                    <!-- <BaseInput v-model="form.pointsDeductedThisYear" disabled></BaseInput> -->
                  </a-form-model-item>
                </a-col>
                <a-col
                  :md="12"
                  :sm="12"
                >
                  <a-form-model-item
                    label="创建人"
                    :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
                    :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }"
                  >
                    <BaseInput
                      v-model="form.creator"
                      disabled
                    ></BaseInput>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col
                  :md="12"
                  :sm="12"
                >
                  <a-form-model-item
                    label="创建时间"
                    :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
                    :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }"
                  >
                    <BaseInput
                      v-model="form.createdTime"
                      disabled
                    ></BaseInput>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col
                  :md="24"
                  :sm="24"
                >
                  <a-form-model-item
                    label="恢复分数说明"
                    :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
                    :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }"
                    prop="description"
                  >
                    <BaseInput
                      v-model="form.description"
                      :maxLength="300"
                      type="textarea"
                    ></BaseInput>
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-form-model>
          </a-modal>
        </a-card>
      </a-col>
    </a-row>
    <!-- 选择审批人 -->
    <selectApprover
      :business-id="businessId1"
      :process-config="setProcessConfig"
      :is-close-upper="false"
      @close="visible = false"
    />
    <!-- 选择审批人 -->
  </base-breadcrumb>
</template>

<script>
import { STable, Ellipsis } from '@/components'
import { getIntegralList, getIntegralTotal, managerIntegralPoint, managerPoint } from '@/api/project/integral'
import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
import PermissionTreeOrganization from '@/components/businessComponents/PermissionTreeOrganization'
import ApprovalDetails from '@/components/approvalDetails'
import ARow from 'ant-design-vue/es/grid/Row'

const columns = [
  {
    title: '序号',
    width: 65,
    scopedSlots: { customRender: 'serial' }
  },
  {
    title: '项目经理名称',
    width: 120,
    dataIndex: 'projectManager'
  },
  {
    title: '项目',
    dataIndex: 'projectName',
    ellipsis: true,
    width: 300
  },
  {
    title: '分公司',
    width: 90,
    dataIndex: 'branchCompanyName'
  },
  {
    title: '项目编号',
    width: 100,
    dataIndex: 'projectNum'
  },
  {
    title: '积分年份',
    width: 100,
    dataIndex: 'yearOfIntegral'
  },
  {
    title: '本年剩余分数',
    width: 120,
    dataIndex: 'currentResidualFraction',
    scopedSlots: { customRender: 'currentResidualFraction' }
  },
  {
    title: '本年扣分分数',
    width: 120,
    dataIndex: 'pointsDeductedThisYear',
    scopedSlots: { customRender: 'pointsDeductedThisYear' }
  },
  {
    title: '提示',
    width: 80,
    dataIndex: 'promptSituationCode',
    scopedSlots: { customRender: 'promptSituationCode' }
  },

  {
    title: '操作',
    dataIndex: 'action',
    width: 220,
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  name: 'a' + Date.now(),
  components: {
    ARow,
    STable,
    ApprovalDetails,
    PermissionTreeOrganization
  },
  data() {
    return {
      columns,
      businessId: '',
      visibleApprove: false,
      collapsed: false,
      select: {},
      searchArr: [
        // 搜索框
        {
          name: '项目经理名称',
          value: 'projectManager',
          type: 'input'
        },
        // {
        //   name: '项目名称',
        //   value: 'projectName',
        //   type: 'input'
        // },
        // {
        //   name: '分公司',
        //   valueKey: 'branchCompanyId',
        //   type: SelectSubCompany
        // },
        {
          name: '积分年份',
          value: 'yearOfIntegral',
          type: 'select',
          data: []
        },
        {
          name: '提示情况',
          value: 'promptSituationCode',
          type: 'select',
          data: [
            { label: '正常', value: '0' },
            { label: '灰色提示', value: '1' },
            { label: '黄色提示', value: '2' },
            { label: '红色提示', value: '3' }
          ]
        }
      ],
      loading: false,
      rules: {
        description: [{ required: true, message: '请输入恢复分数说明', trigger: 'blur' }]
      },

      visible: false,
      title: '恢复分数',

      form: {
        creator: JSON.parse(sessionStorage.getItem('ycloud-user_info')).name,
        createdTime: this.getNowDate()
      },

      queryParam: {},

      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        const obj = {}
        // if (!this.select) {
        //   return
        // }
        // 二级-分公司id
        if (this.select?.tageCode === 'BC') {
          obj.branchComId = this.select.orgId
        }
        // 三级-项目id
        if (this.select?.tageCode === 'PD') {
          obj.projectId = this.select.projectId
        }
        const requestParameters = Object.assign({}, parameter, { ...this.queryParam, ...obj })
        console.log(requestParameters)
        return getIntegralList(requestParameters).then((res) => {
          return res
        })
      },

      years: [],
      totalDels: {},
      // 流程配置
      processConfig: null,
      //点击提交发送流程配置值
      setProcessConfig: null,
      // 业务id
      businessId1: null
    }
  },

  async created() {
    this.getIntegralTotal()
    this.managerPointReq()
    //获取通过获取流程配置值
    this.processConfig = await this.$getConfigFn('project_manager_scores_restore_audit')
  },
  computed: {},
  methods: {
    handleSelect(node) {
      this.select = node
      this.search()
    },
    // 审批详情
    handleApproveDetail(record) {
      this.visibleApprove = true
      this.businessId = record.restoreId
    },
    // 搜索条件获取积分年份
    managerPointReq() {
      managerPoint().then((res) => {
        let arryears = []
        let arr = res.data
        for (let item in arr) {
          arryears.push({ value: arr[item], label: arr[item] + '年' })
        }
        this.searchArr[1].data = arryears
      })
    },

    // 条件搜索
    search(val) {
      this.queryParam = val
      this.$refs.table.refresh(true)
      this.getIntegralTotal()
    },

    // 积分统计
    getIntegralTotal() {
      const obj = {}
      // 二级-分公司id
      if (this.select.tageCode === 'BC') {
        obj.branchCompanyId = this.select.orgId
      }
      // 三级-项目id
      if (this.select.tageCode === 'PD') {
        obj.projectId = this.select.projectId
      }
      const requestParameters = Object.assign({}, { ...this.queryParam, ...obj })
      getIntegralTotal(requestParameters).then((res) => {
        this.totalDels = res.data
      })
    },

    // 查看详情
    handleDels(e) {
      this.$router.push({ path: '/project/integral/details', query: { id: e.id, statusCode: e.statusCode } })
    },

    // 编辑
    handleEdit(record) {
      this.visible = true
      this.form = record
      this.form.creator = JSON.parse(sessionStorage.getItem('ycloud-user_info')).name
      this.form.createdTime = this.getNowDate()
    },

    // 取消弹层
    handleCancel() {
      this.visible = false
    },

    // 恢复分数
    handleOk() {
      if (this.loading) return
      this.$refs.form1.validate((err, values) => {
        if (err) {
          let query = {}
          query.managerScoreId = this.form.id
          query.description = this.form.description
          this.loading = true
          this.setProcessConfig = null
          this.submitApprovalConfirm(this.processConfig, (flag)=>{
            if(!flag) {
              this.loading = false
              return
            }
            managerIntegralPoint(query)
                    .then((res) => {
                      if (res.code == 200 || res.data.code == 200) {
                        this.$message.success('提交成功！')
                        this.$refs.table.refresh(true)
                        this.businessId1 = res.data.id
                        this.setProcessConfig = this.processConfig
                        this.visible = false
                      }
                    })
                    .finally(() => {
                      this.loading = false
                    })
          })
        } else {
          this.$message.warning("请填写完所有必填项信息")
        }
      })
    }
  }
}
</script>

<style scoped>
.promptSituationCode {
  width: 90px;
  height: 35px;
  border-radius: 5px;
}
.promptSituationCode.gray {
  background-color: rgba(215, 215, 215, 1);
}
.promptSituationCode.yellow {
  background-color: rgba(255, 255, 76, 1);
}
.promptSituationCode.red {
  background-color: rgba(240, 153, 164, 1);
}
</style>
